<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .scrollable-div {
        overflow: auto; /* 使div可滚动 */
        scrollbar-width: none; /* 对于现代浏览器隐藏滚动条 */
    }

    /* 兼容IE和Edge */
    .scrollable-div::-webkit-scrollbar {
        display: none;
    }

    .scrollable-div {
        -ms-overflow-style: none; /* IE 10+ */
    }
</style>
<link rel="stylesheet" href="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.css">
<!--<script src="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--<script src="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>-->
<script src="__CDN__/assets/libs/fastadmin-layer/src/layer.js"></script>
<body>
<div style="padding-top: 20px;padding-left: 10px;color: red;font-size: 12px;"> 仅显示本服务可用次卡</div>
<div class="scrollable-div" style="width: 90%; height: 400px;padding: 20px;" id="goodList" >
    <!-- 滚动内容 -->
    {volist name="list" id="vo" key="k"}
    <div style="border-radius: 10px;border: 1px solid red;margin-top: 10px;">
                 <div style="display: flex;justify-content: space-between;align-items: center;padding: 15px;padding-bottom: 10px;font-size: 14px;">
                          <div>
                                  <div>{$vo.name}</div>
                                  <div>项目:{$vo.card_service}</div>
                              </div>
                          <div>¥ {$vo.price}</div>
                      </div>
                 <div style="display: flex;justify-content: space-between;align-items: center;padding: 15px;padding-top: 0px;padding-bottom: 20px;font-size: 14px;">
                          <div>{$vo.time}</div>
                          <div>{$vo.spent}/{$vo.total}</div>
                      </div>
                <div style="font-size: 14px;display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;background: red;color: #FFF;border-radius: 0 0 10px 10px;">
                          <div>{$vo.type_name}</div>
                          <div> <input id="min_card_{$k}" name="" type="button" value="-" onclick="mina_card_list({$k})"  style="width: 35px;height: 35px;border-radius: 50%;border: none;font-size: 25px;color: red"/>
                          <input id="text_card_list_{$k}" name="card" type="text" value="0"  style="width: 35px;outline:none;height: 35px;border: none;font-size: 25px;text-align: center" readonly/>
                          <input id="add_card_{$k}" name="" type="button" value="+" onclick="add_card_list({$k})" style="width: 35px;height: 35px;border-radius: 50%;border: none;font-size: 25px;color: red"/></div>
                </div>
            </div>
    {/volist}
</div>
<div style="color: red;">
    共选<span id="total_num">1</span>次,立减 ¥ <span id="total_money">100.00</span>
</div>
</body>
<script>
    $(document).ready(function () {
        // 初始化滚动条
        let data  = <?= json_encode($list)?>;
        let serializedCardListArray = JSON.stringify(data);
        sessionStorage.setItem('cardList', serializedCardListArray);
        let num  = <?= $num?>;
        sessionStorage.setItem('buynum', num);
        $('#total_num').text(get_total_num());
        let price  = <?= $price?>;
        $('#total_money').text((get_total_num() * price).toFixed(2))
    });
    function add_card_list(id){
        var num = parseInt(document.getElementById('text_card_list_'+id).value);
        num++;
        var data = sessionStorage.getItem('cardList');
        var  arrid = id-1;
        if (data == null) {
            data = [];
        } else {
            data = JSON.parse(data);
            var buynum = sessionStorage.getItem('buynum');
            var checknum = 0;
            for (var i = 0; i < data.length; i++) {
                 checknum = checknum + data[i].checknum;
            }
            if (checknum >= buynum) {
                alert('您已选满此次购买该服务次数');
                return;
            }
            if(num>data[arrid].spent){
                alert('该次卡服务次数已达最大值');
                num = data[arrid].spent;
            }
            data[arrid].checknum = num;
            console.log(456777)
            console.log(data)
            var serializedCardListArray = JSON.stringify(data);
            sessionStorage.setItem('cardList', serializedCardListArray);
            document.getElementById('text_card_list_'+id).value = num;
            $('#total_num').text(get_total_num());
            let price  = <?= $price?>;
            $('#total_money').text((get_total_num() * price).toFixed(2))
        }
    }
    function mina_card_list(id){
        var num = parseInt(document.getElementById('text_card_list_'+id).value);
        if(num>0){
            num--;
            var  arrid = id-1;
            var data = sessionStorage.getItem('cardList');
            if (data == null) {
                data = [];
            } else {
                data = JSON.parse(data);
                data[arrid].checknum = num;
                var serializedCardListArray = JSON.stringify(data);
                sessionStorage.setItem('cardList', serializedCardListArray);
            }
        }
        document.getElementById('text_card_list_'+id).value = num;
        $('#total_num').text(get_total_num());
        let price  = <?= $price?>;
        $('#total_money').text((get_total_num() * price).toFixed(2))
    }
    function get_total_num(){
        var total_num = 0;
        var data = sessionStorage.getItem('cardList');
        if (data == null) {
            data = [];
        } else {
            data = JSON.parse(data);
            for (var i = 0; i < data.length; i++) {
                total_num += data[i].checknum;
            }
        }
        return total_num;
    }
    </script>
</html>